import { Panel, LayerLink } from 'comps/common';
import { Button, Icon } from 'antd';
import * as React from 'react';
import ServiceTag from './service-tag';
import ServiceTagAddModal from './service-tag-add';
import ServicePermissionManager from './service-permission-manager';
import ServiceDetailInfoPanel from './service-detail-info';
import ServiceTracingList from '../containers/service-tracing-list';

class ServiceDetail extends React.Component {
  constructor(props) {
    super(props);
  }

  showServiceTagAddModal() {
    const modal = this.refs.tagAddModal;
    modal.showModal();
  }

  showServicePermissionModal() {
    const modal = this.refs.permissionModal;
    modal.showModal();
  }

  render() {
    const TagPanelTitle = (
      <span>标签
        <div className="panel-head" style={{float: 'right'}}>
          <Button type="primary" size="small" onClick={::this.showServiceTagAddModal} style={{right:30}}>
            <Icon type="plus-circle-o"/>
          </Button>
        </div>
      </span>
    );

    const {tags= []} = this.props.service;

    return (
      <div className="machine-detail">
        <Panel title='操作'>
          <div>
            {/*<Button size="small">文档查看</Button>*/}
            <Button style={{marginRight: 15}} type="primary" size="small" onClick={::this.showServicePermissionModal}>权限管理</Button>
            <LayerLink style={{marginRight: 15}} className='ant-btn ant-btn-sm' component={ServiceTracingList}
              data={{serviceId:this.props.service.id}}>链路跟踪</LayerLink>
          </div>
        </Panel>
        <ServiceDetailInfoPanel service={this.props.service}/>
        <Panel title={TagPanelTitle}>
          {tags.map(tag => (
            <ServiceTag service={this.props.service} onRemoveServiceTag={::this.props.onRemoveServiceTag}
              key={tag}>{tag}</ServiceTag>
          ))}
        </Panel>
        <ServicePermissionManager service={this.props.service} ref="permissionModal"
          onSave={this.props.onPermissionSave}/>
        <ServiceTagAddModal service={this.props.service} ref="tagAddModal" onSave={this.props.onServiceTagSave}/>
      </div>
    );
  }
}

export default ServiceDetail;
